<template>
	<view class="classify">
		<view class="top headline">
			<!-- <i class="cubeic-back"></i> -->
			商品分类
			<!-- #ifndef  MP-WEIXIN -->
			<image src="/static/img/find_2.png" class="right" @click="go_find()"/>
			 <!-- #endif -->
		</view>
		<view class="main">
			<view class="left">
				<view>
					<view @click="go_hotshop()">精选热销集合</view>
					<view class="stair" v-for="(item, index) in goodList" :key="index" v-bind:class="{ active: classify1 == item.id }">
						<view @click="open1(item.id, item)">{{ item.catName }}</view>
						<view class="second_list" v-for="(item1, index1) in item.junior" :key="index1" v-show="classify1 == item.id">
							<view class="second" v-bind:class="{ active: classify2 == item1.id }">
								<view @click="open2(item1.id, item1)">{{ item1.catName }}</view>
								<view class="three" v-show="classify2 == item1.id" v-for="(item2, index2) in item1.junior" :key="index2">
									<view v-bind:class="{ active: classify3 == item2.id }" @click="open3(item2.id, item2)">{{ item2.catName }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" ref="right" @scroll="mainScroll()">
				<p class="title">
					{{ title }}
					<i class="cubeic-arrow"></i>
				</p>
				<view class="shop">
					<view class="list" v-for="(item, index) in shopList" :key="index" @click="goshop(item.id)">
						<image :src="item.goodsImg" mode="aspectFill" />
						<view>{{ item.goodsName }}</view>
					</view>
				</view>
				<view v-show="shopList.length==0" class="notavailable">
					<image src="../../static/img/notavailable.png" mode="widthFix"></image>
					<view class="nottext">暂时没有数据</view>
				</view>
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
import classify from '../../servers/shop/classify.js';
export default {
	props: ['paging'],
	data() {
		return {
			title: '精选热销集合',
			classify1: 0,
			classify2: 0,
			classify3: 0,
			is_go_top: false,
			read: 0,
			goodList: [],
			page: {
				total: 1,
				size: 10,
				pages: 10
			},
			shopList: []
		};
	},
	mounted() {
		var  that=this
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '网络不给力，请检查您的网络',
						icon: 'none'
					})
					uni.onNetworkStatusChange(function(res) {
						
						if (res.isConnected) {
							
							that.go_data();
						} 
					});
				} else {
					that.go_data();
				}
			}
		});
		
	},
	methods: {
		go_data() {
			classify
				.getGoodsCategory()
				.then(res => {
					this.goodList = this.tidy(res.data);
					console.log(this.goodList);
					this.go_hotshop();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		go_hotshop() {
			this.classify1 = 0;
			this.classify2 = 0;
			this.classify3 = 0;
			this.title = '精选热销集合'
			classify
				.hotGoods()
				.then(res => {
					this.shopList = res.data.records.map(v => {
						v.goodsImg = this.imgCDNUrl + v.goodsImg;
						return v;
					});
					this.page.pages = res.data.pages;
					this.page.total = res.data.total;
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		tidy(e) {
			var classify = [];
			for (var i = 0; i < e.length; i++) {
				e[i].junior = [];
				if (e[i].catLevel == 1) {
					classify.push(e[i]);
				} else if (e[i].catLevel == 2) {
					for (var i1 = 0; i1 < classify.length; i1++) {
						if (classify[i1].id == e[i].parentId) {
							classify[i1].junior.push(e[i]);
						}
					}
				} else if (e[i].catLevel == 3) {
					for (var i1 = 0; i1 < classify.length; i1++) {
						for (var i2 = 0; i2 < classify[i1].junior.length; i2++) {
							console.log(classify[i1].junior.length);
							if (classify[i1].junior[i2].id == e[i].parentId) {
								classify[i1].junior[i2].junior.push(e[i]);
							}
						}
					}
				}
			}
			return classify;
		},
		open1(e, item) {
			if (e === this.classify1) {
				this.classify1 = 0;
			} else {
				this.classify1 = e;
				
			}
			this.getshop(e, item);
			this.title=item.catName
			this.classify2 = 0;
			this.classify3 = 0;
		},
		open2(e, item) {
			if (e === this.classify2) {
				this.classify2 = 0;
			} else {
				this.classify2 = e;
				
			}
			this.title=item.catName
			this.getshop(e, item);
			 this.classify3 = 0;
		},
		open3(e, item) {
			if (this.classify3 != e) {
				this.classify3 = e;
				
			}
			this.title=item.catName
			this.getshop(e, item);
		},
		getshop(e, item) {
			// if (item.junior.length == 0) {
				// this.title = item.catName;
				this.shopList=[]
				classify
					.getListByCategoryId(e)
					.then(res => {
						this.shopList = res.data.records.map(v => {
							v.goodsImg = this.imgCDNUrl + v.goodsImg;
							return v;
						});
						this.page.pages = res.data.pages;
						this.page.total = res.data.total;
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			// }
		},
		go_find(){
			uni.navigateTo({
				url:'./commodity/find'
			})
		},
		goshop(e) {
			uni.removeStorageSync('actId');
			this.commonality.route_baling('/pages/shop/commodity/particulars','shopId',e)
		},
		mainScroll() {
			let read = this.$refs.right.scrollTop;
			this.read = read;
			if (read > 200) {
				this.is_go_top = true;
			} else {
				this.is_go_top = false;
			}
		},
		backTop() {
			const that = this;
			let timer = setInterval(() => {
				let ispeed = Math.floor(-that.$refs.right.scrollTop / 10);
				that.$refs.right.scrollTop = that.$refs.right.scrollTop + ispeed;
				if (that.$refs.right.scrollTop === 0) {
					clearInterval(timer);
				}
			}, 16);
		}
	}
};
</script>

<style lang="less" scoped>
.classify {
	position: relative;
	height: 100%;
	background: #fff;
	padding-top: var(--status-bar-height);
	.headline {
		image {
			position: absolute;
			width: 20px;
			height: 20px;
			top: 0px;
			right: 0px;
			padding: 14px;
		}
	}
	.main {
		overflow: hidden;
		position: absolute;
		top: 0rpx;
		height: 100vh;
		// #ifdef H5
		padding: 44px 0 50px;
		// #endif
		// #ifndef H5
		padding: 44px 0 0;
		// #endif
		box-sizing: border-box;
		width: 100%;
		.left {
			width: 33.8%;
			height: 100%;
			box-sizing: border-box;
			padding-left: 31rpx;
			padding-top:  var(--status-bar-height);
			line-height: 110rpx;
			background: #f4f4f4;
			font-size: 26rpx;
			overflow: auto;
			.stair {
				padding-left: 31rpx;
				position: relative;
				ul {
					padding-left: 31rpx;
				}
				.second {
					position: relative;
					.three {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						.active {
							color: #bd3c8c;
						}
					}
				}
				.second:before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					left: -30rpx;
					top: 42rpx;
					border-width: 12rpx;
					border-style: solid;
					border-color: #999999 transparent transparent transparent;
					transform: rotate(-90deg);
				}
				.active:before {
					top: 45rpx;
					transform: rotate(0);
				}
			}
			.stair:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: 0rpx;
				top: 42rpx;
				border-width: 12rpx;
				border-style: solid;
				border-color: #999999 transparent transparent transparent;
				transform: rotate(-90deg);
			}
			.active:before {
				top: 45rpx;
				transform: rotate(0);
			}
		}
		.right {
			width: 66.2%;
			height: 100%;
			overflow: auto;
			padding-top:  var(--status-bar-height);
			background: #ffffff;
			.title {
				padding: 41rpx 20rpx 41rpx 31rpx;
				font-size: 30rpx;
				.cubeic-arrow {
					float: right;
					color: #b8b8b8;
				}
			}
			.shop {
				.list {
					float: left;
					width: 27%;
					margin-left: 4.75%;
					image {
						width: 100%;
						height: 134rpx;
						border-radius: 10rpx;
					}
					view {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 40rpx;
						font-size: 22rpx;
					}
				}
			}
		}
	}
}
</style>
